<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


 <div class="pingtai-box">
      
        
        <dl id="laopai">
          <dt>
             <img src="images/laopai.png" class="type-pic" >
             <div class="laopaiback">
              <h2>老牌平台</h2>
               <c:forEach items="${list}" var="list" begin="0" end="2">
              <p><a href="javascript:void(0)" valuebaobiao="tubiaolao" valueId="${list.platform_name }" class='curr'  valueName="${list.platform_id }" ><img src="images/logo33-33.png" >${list.platform_name }</a></p>
				</c:forEach>
              </div>
          </dt>
          <div class="tubiao" id="tubiaolao" >
                </div>
            <c:forEach items="${list}" var="list" begin="0" end="2">
          <dd value="${list.platform_id}" p='${list.platform_name}'>
            <ul>
               <li>
                 <img style="width: 140px; height: 45px;" src="${imgHost }${list.logo}" >
                 <h4><a href="${basePath }/article/${list.content_id}" target="_blank" id="${list.platform_id}">${list.platform_name}</a></h4>
               </li>
               <li>
                <p>昨日成交:<span>$${list.volume}</span></p>
               </li>
               <li>
                 <p>平均利率:<span>${list.compound_interest}</span></p>
               </li>
               <li style="border-bottom:none;">
                 <p>安全评级:<span>AAA</span></p>
               </li>
            </ul>
          </dd>
        </c:forEach>   
        </dl>        
           
           
           
        <dl id="xinrui">
          <dt>
            <img src="images/xinrui.png"  class="type-pic">
            <div class="xinruiback">
              <h2>新锐平台</h2>
             <c:forEach items="${list}" var="list" begin="3" end="5">
              <p><a href="javascript:void(0)"  class="curr"  valuebaobiao="tubiaoxinrui" valueId="${list.platform_name }"  valueName="${list.platform_id }"  ><img src="images/logo33-33.png" >${list.platform_name }</a></p>
             </c:forEach>
            </div>
          </dt>
          <div class="tubiao" id="tubiaoxinrui">
          </div>
         
         
          <c:forEach items="${list}" var="list" begin="3" end="5">
	          <dd value="${list.platform_id}" p='${list.platform_name}'>
	            <ul>
	               <li>
	                 <img style="width: 140px; width: 45px;" src="${imgHost }${list.logo}" >
	                 <h4><a href="${basePath }/article/${list.content_id}" target="_blank"  id="${list.platform_id}">${list.platform_name}</a></h4>
	               </li>
	               <li>
	                <p>昨日成交:<span>$${list.volume}</span></p>
	               </li>
	               <li>
	                 <p>平均利率:<span>${list.compound_interest}</span></p>
	               </li>
	               <li style="border-bottom:none;">
	                 <p>安全评级:<span>AAA</span></p>
	               </li>
	            </ul>
	          </dd>
	        </c:forEach>  
          
          
        </dl>  
            
        <dl id="tese" style="margin-bottom:0;">
          <dt>
            <img src="images/tese.png"  class="type-pic">
            <div class="teseback">
              <h2>特色平台</h2>
                <c:forEach items="${list}" var="list" begin="6" end="8">
              <p><a href="javascript:void(0)"   valuebaobiao="tubiaotese" valueId="${list.platform_name }"  valueName="${list.platform_id }"  ><img src="images/logo33-33.png" >${list.platform_name }</a></p>
             </c:forEach>
            </div>
          </dt>
          <div class="tubiao" id="tubiaotese">
          </div>
         
         
          <c:forEach items="${list}" var="list" begin="6" end="8">
	          <dd value="${list.platform_id}" p='${list.platform_name}'>
	            <ul>
	               <li>
	                 <img style="width: 140px; width: 45px;" src="${imgHost }${list.logo}" >
	                 <h4><a href="${basePath }/article/${list.content_id}" target="_blank"  id="${list.platform_id}">${list.platform_name}</a></h4>
	               </li>
	               <li>
	                <p>昨日成交:<span>$${list.volume}</span></p>
	               </li>
	               <li>
	                 <p>平均利率:<span>${list.compound_interest}</span></p>
	               </li>
	               <li style="border-bottom:none;">
	                 <p>安全评级:<span>AAA</span></p>
	               </li>
	            </ul>
	          </dd>
	        </c:forEach>    
        </dl>
       
      </div>
<!--平台模块翻转begin-->
<script>
$(function() {
	//老牌翻转
	$('#laopai dd').click(function() {
		var name  = $(this).attr('p');
		if($(this).hasClass('rightfloat')==false  && $(this).hasClass('rightfloat1')==false ){
			$(this).addClass('rightfloat');	
			$("#tubiaolao").animate({left:'664px'},'slow');
			ajaxjiazai('tubiaolao',name,$(this).attr('value'));
			$(this).siblings('dd').hide();
			$(this).siblings('dt').css({'transition':'all 2s','transform':'rotateY(180deg)'});
			$(this).siblings('dt').find('.laopaiback').css({'transition':'all 1s','transform':'rotateY(180deg)'});
			$(this).siblings('dt').find('.type-pic').show().delay(500).hide(0);
			$(this).siblings('dt').find('.laopaiback').hide().delay(500).show(0); 
		    zuobianxuanzhong('laopai',this);
		}else{	
			var name  = $(this).attr('p');
			$("#tubiaolao").animate({left:'664px'},'slow');
			ajaxjiazai('tubiaolao',name,$(this).attr('value'));
			
			$(this).siblings('dt').css({'transition':'all 2s','transform':'rotateY(180deg)'});
			//$(this).siblings('dt').find('.type-pic').css({'transition':'all 1s','transform':'rotateY(0deg)'});	
			}
		$('#xinrui dd.rightfloat').removeClass('rightfloat');
		$('#xinrui dd.rightfloat1').removeClass('rightfloat1');
		$('#xinrui dd').show();	
		$('#xinrui .tubiao').hide();
		$('#xinrui dt .type-pic').show();	
		$('#xinrui dt .xinruiback').hide();
		$('#xinrui dt').css({'transform':'rotateY(360deg)','transition':'all 0s'});		
		$('#tese dd.rightfloat').removeClass('rightfloat');	
		$('#tese dd.rightfloat1').removeClass('rightfloat1');	
		$('#tese dd').show();	
		$('#tese .tubiao').hide();
		$('#tese dt .type-pic').show();	
		$('#tese dt .teseback').hide();
		$('#tese dt').css({'transform':'rotateY(360deg)','transition':'all 0s'});
		var a_id = $(this).find("a").attr("id");
		$('#laopai dt').find("a").each(function(n,value){
				if($(this).attr("id") == a_id){
					$(this).addClass("curr");
				}else{
					$(this).removeClass();
				}
		});
	});
	//新锐翻转
	$('#xinrui dd').click(function() {
		var name  = $(this).attr('p');
		if($(this).hasClass('rightfloat')==false  && $(this).hasClass('rightfloat1')==false ){
			$(this).addClass('rightfloat');	
			$("#tubiaoxinrui").animate({left:'664px'},'slow');
			ajaxjiazai('tubiaoxinrui',name,$(this).attr('value'));
			$("#tubiaoxinrui").show();
			$(this).siblings('dd').hide();
			$(this).siblings('.tubiao').show(1000);
			$(this).siblings('dt').css({'transition':'all 2s','transform':'rotateY(180deg)'});
			$(this).siblings('dt').find('.xinruiback').css({'transition':'all 1s','transform':'rotateY(180deg)'});
			$(this).siblings('dt').find('.type-pic').show().delay(500).hide(0);
			$(this).siblings('dt').find('.xinruiback').hide().delay(500).show(0);
		}else{	
			ajaxjiazai('tubiaoxinrui',name,$(this).attr('value'));
			$("#tubiaoxinrui").show();
			$(this).siblings('dt').css({'transition':'all 2s','transform':'rotateY(180deg)'});
			
			}
		$('#laopai dd.rightfloat').removeClass('rightfloat');
		$('#laopai dd.rightfloat1').removeClass('rightfloat1');
		$('#laopai dd').show();	
		$('#laopai .tubiao').hide();
		$('#laopai dt .type-pic').show();	
		$('#laopai dt .laopaiback').hide();
		$('#laopai dt').css({'transform':'rotateY(360deg)','transition':'all 0s'});		
		$('#tese dd.rightfloat').removeClass('rightfloat');	
		$('#tese dd.rightfloat1').removeClass('rightfloat1');	
		$('#tese dd').show();	
		$('#tese .tubiao').hide();
		$('#tese dt .type-pic').show();	
		$('#tese dt .teseback').hide();
		$('#tese dt').css({'transform':'rotateY(360deg)','transition':'all 0s'});
		
		var a_id = $(this).find("a").attr("id");
		$('#xinrui dt').find("a").each(function(n,value){
				if($(this).attr("id") == a_id){
					$(this).addClass("curr");
				}else{
					$(this).removeClass();
				}
		});
		
	});
   
    //特色翻转
	$('#tese dd').click(function() {
		var name  = $(this).attr('p');
		if($(this).hasClass('rightfloat')==false &&  $(this).hasClass('rightfloat1')==false ){
			$(this).addClass('rightfloat');	
			$("#tubiaotese").animate({left:'664px'},'slow');
			$('#tubiaotese').show();
			ajaxjiazai('tubiaotese',name,$(this).attr('value'));
			$(this).siblings('dd').hide();
			$(this).siblings('.tubiao').show(1000);
			$(this).siblings('dt').css({'transition':'all 2s','transform':'rotateY(180deg)'});
			$(this).siblings('dt').find('.teseback').css({'transition':'all 1s','transform':'rotateY(180deg)'});
			$(this).siblings('dt').find('.type-pic').show().delay(500).hide(0);
			$(this).siblings('dt').find('.teseback').hide().delay(500).show(0);
		}else{
			$('#tubiaotese').show();
			ajaxjiazai('tubiaotese',name,$(this).attr('value'));
			$(this).siblings('dt').css({'transition':'all 2s','transform':'rotateY(180deg)'});
			}
			
		$('#laopai dd.rightfloat').removeClass('rightfloat');
		$('#laopai dd.rightfloat1').removeClass('rightfloat1');
		$('#laopai dd').show();	
		$('#laopai .tubiao').hide();
		$('#laopai dt .type-pic').show();	
		$('#laopai dt .laopaiback').hide();
		$('#laopai dt').css({'transform':'rotateY(360deg)','transition':'all 0s'});		
		
		$('#xinrui dd.rightfloat').removeClass('rightfloat');
		$('#xinrui dd.rightfloat1').removeClass('rightfloat1');	
		$('#xinrui dd').show();	
		$('#xinrui .tubiao').hide();
		$('#xinrui dt .type-pic').show();	
		$('#xinrui dt .xinruiback').hide();
		$('#xinrui dt').css({'transform':'rotateY(360deg)','transition':'all 0s'});			
		var a_id = $(this).find("a").attr("id");
		$('#tese dt').find("a").each(function(n,value){
				if($(this).attr("id") == a_id){
					$(this).addClass("curr");
				}else{
					$(this).removeClass();
				}
		});	
	});
   
	
});

   $('body').click(function() {
	    $("#laopai dd").removeClass('rightfloat');
	    $("#laopai dd").removeClass('rightfloat1');	
		$("#laopai dd").show();
		$("#laopai .tubiao").hide();
		$("#laopai dt").css({'transform':'rotateY(360deg)','transition':'all 0s'});
		$("#laopai dt .type-pic").show();
		$("#laopai dt .laopaiback").hide();
		$("#xinrui dd").removeClass('rightfloat');	
		$("#xinrui dd").removeClass('rightfloat1');	
		$("#xinrui dd").show();
		$("#xinrui .tubiao").hide();
		$("#xinrui dt").css({'transform':'rotateY(360deg)','transition':'all 0s'});
		$("#xinrui dt .type-pic").show();
		$("#xinrui dt .xinruiback").hide();
		$("#tese dd").removeClass('rightfloat');	
		$("#tese dd").removeClass('rightfloat1');	
		$("#tese dd").show();
		$("#tese .tubiao").hide();
		$("#tese dt").css({'transform':'rotateY(360deg)','transition':'all 0s'});
		$("#tese dt .type-pic").show();
		$("#tese dt .teseback").hide();
	});
	$('#laopai').click(function() {
		 return false;
		});
	$('#xinrui').click(function() {
		 return false;
		});	
	$('#tese').click(function() {
		 return false;
		});
	
	function aaa(domId,data,platformName) {
		data  = eval("("+data+")");
		var fileLocation ='${basePath }/js/echarts-2.1.10/build/dist';
		require.config({
			paths:{ 
			 'echarts': fileLocation
			}
		});
		//作为入口
		require(
		[
		     'echarts',
			 'echarts/chart/line'
		], 
		function (ec) {
		    var myChart = ec.init(document.getElementById(domId));
		    option = {
		    	    tooltip : {
		    	        trigger: 'axis'
		    	    },
		    	    grid :{
		    			x:10,
		    			y:0,
		    			x2:12,
		    			y2:23
		    		},
		    	    legend: {
		    	        data:[''+platformName+'']
		    	    },
		    	    toolbox: {
		    	        show : false,
		    	        feature : {
		    	            mark : {show: true},
		    	            dataView : {show: true, readOnly: false},
		    	            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
		    	            restore : {show: true},
		    	            saveAsImage : {show: true}
		    	        }
		    	    },
		    	    calculable : true,
		    	    xAxis : [
		    	        {
		    	        	
		    	            type : 'category',
		    	            boundaryGap : false,
		    	            data : (function (){
		    	                var res = [];
		    	            		for(var i=0;i<data.length;i++){
		    	            		//	alert( new Date(data[i].data_date).getMonth()+1+"/"+new Date(data[i].data_date).getDate());
		    	            			res.push(new Date(data[i].data_date).getMonth()+1+"/"+new Date(data[i].data_date).getDate());
		    	            		}
		    	                return res;
		    	            })()
		    	        }
		    	    ],
		    	    yAxis : [
		    	        {
		    	        	show : false,
		    	            type : 'value'
		    	        }
		    	    ],
		    	    series : [
		    	              
		    	        {
		    	            name:platformName,
		    	            type:'line',
		    	            stack: '总量',
		    	            itemStyle: {normal: {areaStyle: {type: 'default'}}},
		    	            data:(function (){
		    	                var res = [];
								for(var i=0;i<data.length;i++){
									res.push(data[i].volume);
								}
		    	                return res;
		    	            })()
		    	        }
		    	       
		    	        
		    	    ]
		    	};
		    myChart.setOption(option);  
		});
	}
	

	  function ajaxjiazai(ddId,name,platformId){
		  
		  $.ajax({
				url: "${basePath}/index/platformDataBaobiao",
				data:{"platform_id":platformId},
				 type: "post",
				dataType:'html',
				success: function(data){
					$("#"+ddId+"").show();
				    aaa(ddId,data,name);
				}
	     	});
		  
	  }
	
	  $('#laopai dt').find('p').each(function (){
		  clickLeft(this,'laopai');
	  });
	  $('#xinrui dt').find('p').each(function (){
		  clickLeft(this,'xinrui');
	  });
	  $('#tese dt').find('p').each(function (){
		  clickLeft(this,'tese');
	  });
	function clickLeft(objectThis,clickWho){
		$(objectThis).click(function (){
		//alert($(objectThis).find('a').attr('valuename'));//左边的
		/* alert($(objectThis).find('a').attr('valueid')); */
			$("#"+clickWho+"").find('dd').each(function (){
				   if($(this).attr('value') == $(objectThis).find('a').attr('valuename')){
					$(this).siblings('dd').hide();
					$(this).removeClass('rightfloat');
					$(this).addClass('rightfloat1');
					$(this).show();
					ajaxjiazai($(objectThis).find('a').attr('valuebaobiao'),$(this).find('ul li h4 a').text(),$(this).attr('value'));
				   }
				
			});
			$(objectThis).parent().find('p').each(function (){
				$(this).find('a').removeClass('curr');
				/*  */
			});
				 $(objectThis).find('a').addClass('curr');
		});
	
			
	}
	  function zuobianxuanzhong(nagePlatform,objectThis){
		  $('#'+nagePlatform+' dt div ').find('p').each(function (){
				if($(this).find('a').attr('valuename') == $(objectThis).attr('value') ){
					//alert($(this).find('a').attr("class"));
					$(this).find('a').attr("class","curr");
					//$(this).find('a').addClass('curr');
				}
			});
	  }
</script>
<!--平台模块翻转end-->